<template>
    <div class="file-container">
        <tab></tab>
        <div class="file-wrapper base-width">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import tab from '../../base/tab/tab'
    import Footer from '../../base/footer/Footer'
    import {prefixStyle} from "../../common/js/dom";
    const transform = prefixStyle('transform')
    export default {

        methods: {
            onPrivateFile () {
                if (this.showBack) { return }
                this.$refs.watchfile.style[transform] = 'translate3d(0, 92px, 0)'
                setTimeout(() => {
                    this.$refs.watchfile.style[transform] = 'translate3d(0, 0, 0)'
                    this.$refs.backnav.style.opacity = 1
                    this.showBack = true
                    this.privateFile = 8
                }, 250)
            },
            backnav () {
                if (!this.showBack) { return }
                this.$refs.watchfile.style[transform] = 'translate3d(0, -92px, 0)'
                this.$refs.backnav.style.opacity = 0
                setTimeout(() => {
                    this.$refs.watchfile.style[transform] = 'translate3d(0, 0, 0)'
                    this.showBack = false
                    this.privateFile = 3
                }, 250)
            }
        },
        components: {
            tab,
            Footer,
        }
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
   .file-container {
       /deep/.tab-wrapper {
           position: relative;
           background: $bg-tab;
           opacity: 0.83;
       }
       .file-wrapper {
           margin-top: 16px;
           padding: 0 90px;
           box-sizing: border-box;
           .back-nav-enter-active, .back-nav-leave-active {
               transition: opacity .5s;
           }
           .back-nav-enter, .back-nav-leave-to {
               opacity: 1;
           }
           .back-nav {
               width: 100%;
               height: 78px;
               padding-left: 40px;
               margin-top: 24px;
               line-height: 90px;
               border-radius: 20px;
               box-sizing: border-box;
               border: 1px solid $border-color;
               box-shadow: 0 13px 15px rgba(31, 45, 61, 0.15);
               transition: all 250ms;
               &:hover {
                   opacity: .95;
                   transform: translateY(7px);
                   box-shadow: 0 3px 5px rgba(31, 45, 61, 0.2);
               }
           }
       }
   }
</style>
